<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="float:left;">统计设置<font color="red">(注：双击支付)</font></span>
        <el-button style="float: right; padding: 3px 0" type="info" @click="clearsale">
          <i class="el-icon-delete-solid"></i>
        </el-button>
        <el-button
          style="float: right; padding: 3px 0"
          type="success"
          icon="el-icon-zoom-in"
          @click="mhcx"
        >搜索</el-button>
      </div>
      <div class="text item">
        <el-form inline :model="customer">
          <el-form-item label="往来日期:">
            <el-date-picker
              v-model="datearray"
              value-format="yyyy-MM-dd"
              size="mini"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="供应商:">
            <el-select size="mini" v-model="customer.customerId" placeholder="请选择">
              <el-option
                v-for="customer in customerList"
                :key="customer.id"
                :label="customer.name"
                :value="customer.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否付款:">
            <el-select size="mini" v-model="customer.state">
              <el-option label="全部" value="0"></el-option>
              <el-option label="未付" value="1"></el-option>
              <el-option label="已付" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="text item">
        <el-table
          ref="singleTable"
          :data="customerstateList"
          highlight-current-row
          max-height="250"
          style="width: 100%"
          @row-dblclick="getqrcode"
          @row-click="getGoodsList"
        >
          <el-table-column property="customerName" label="客户" width="120"></el-table-column>
          <el-table-column property="customerDate" label="日期" width="120"></el-table-column>
          <el-table-column property="customerNumber" label="单号"></el-table-column>
          <el-table-column property="style" label="类型"></el-table-column>
          <el-table-column property="amountPaid" label="总金额"></el-table-column>
          <el-table-column property="state" label="付款状态" :formatter="stateformatter"></el-table-column>
          <el-table-column property="userName" label="操作员"></el-table-column>
          <el-table-column property="remarks" label="备注"></el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="text item">
        <el-table
          ref="singleTable"
          :data="GoodsList"
          highlight-current-row
          max-height="250"
          style="width: 100%"
        >
          <el-table-column property="code" label="商品编号" width="120"></el-table-column>
          <el-table-column property="name" label="商品名称" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column property="model" label="商品型号"></el-table-column>
          <el-table-column property="price" label="单价"></el-table-column>
          <el-table-column property="num" label="数量"></el-table-column>
          <el-table-column property="unit" label="单位"></el-table-column>
          <el-table-column property="total" label="总金额"></el-table-column>
        </el-table>
      </div>
    </el-card>
     <!--二维码dialog-->
    <el-dialog title="请使用支付宝扫描支付" :visible.sync="dialogqrcode" width="300px" class="dialog">
      <div>
        <canvas id="q"></canvas>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      customer: {},
      datearray: [],
      customerstateList: [],
      GoodsList: [],
      customerList: [],
      dialogqrcode: false
    };
  },
  mounted() {
    this.getcustomers();
    this.getcustomerStateList();
  },
  methods: {
    getqrcode(row, column, event) {
      this.dialogqrcode = true;
      var orders = {};
      orders.orderNo = row.customerNumber;
      orders.totalAmount = row.amountPaid;
      orders.subject = "小小草科技有限公司";
      orders.access_token = localStorage.getItem("access_token");
      var canvas = document.getElementById("q");
      var $this = this;
      this.axios({
        method: "post",
        url:
          this.requestUrl +
          "statistical/statistical/alibaba/pay/createPayOrder",
        params: orders
      }).then(function(res) {
        console.log("生成支付宝扫码二维码返回信息为{}", res);
        $this.QRCode.toCanvas(canvas, res.data.obj, function(error) {
          if (error) {
            console.error(error);
          }
          console.log("QRCode success!");
        });
      });
    },
    stateformatter(row) {
      return row.state == 1 ? "未付" : "已付";
    },
    //查询出所有的客户
    getcustomers() {
      this.axios({
        method: "get",
        url: this.requestUrl + "sale/sale/tCustomer/list",
        params: {
          access_token: localStorage.getItem("access_token")
        }
      }).then(res => {
        console.log("返回的客户列表是", res.data.obj);
        this.customerList = res.data.obj;
      });
    },
    mhcx() {
      console.log("时间数组是", this.datearray);
      this.customer.customerDateStart = this.datearray[0];
      this.customer.customerDateEnd = this.datearray[1];
      this.getcustomerStateList();
    },
    clearsale() {
      this.customer = {};
      this.datearray = [];
      this.getcustomerStateList();
    },
    getcustomerStateList() {
      this.customer.access_token = localStorage.getItem("access_token");
      this.axios({
        method: "get",
        url:
          this.requestUrl + "statistical/statistical/tCustomerStatement/list",
        params: this.customer
      }).then(res => {
        console.log("返回出售信息", res.data.obj);
        this.customerstateList = res.data.obj;
      });
    },
    getGoodsList(row, column, event) {
      if (row.style == "出售") {
         this.axios({
        method: "get",
        url: this.requestUrl + "sale/sale/tSaleListGoods/list",
        params: {
          saleListId: row.id,
          access_token: localStorage.getItem("access_token")
        }
      }).then(res => {
        console.log("返回客户退货信息", res.data.obj);
        this.GoodsList = res.data.obj;
      });
      } else {
         this.axios({
        method: "get",
        url: this.requestUrl + "sale/sale/tCustomerReturnListGoods/list",
        params: {
          customerReturnListId: row.id,
          access_token: localStorage.getItem("access_token")
        }
      }).then(res => {
        console.log("返回客户退货信息", res.data.obj);
        this.GoodsList = res.data.obj;
      });
      }
    }
  }
};
</script>
<style scoped>
.el-form-item {
  float: left;
}
</style>